<template>
  <!-- <div class="tabbar">
    <template v-for="item in tabbars" :key="item.name">
      <div class="item">
          <img class="icon" :src="getImgUrl(item.icon)" alt="">
          <span class="text">{{ item.name }}</span>
      </div>
    </template>
</div> -->
  <div class="tab-bar">
    <van-tabbar v-model="curentTabIndex" route active-color="#ff9854">
    <template v-for="item in tabbars" :key="item.name">
      <van-tabbar-item :to="item.path">
      <span>{{item.name}}</span>
      <template #icon="props">
        <img :src="props.active ? getImgUrl(item.selectedIcon) : getImgUrl(item.icon)" />
      </template>
    </van-tabbar-item>
    </template>
    <!-- <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item> -->
  </van-tabbar>
  </div>

</template>
<script setup>
import { getImgUrl } from '@/utils/load_image';
import { ref } from 'vue';
const curentTabIndex = ref(0)
const tabbars = [
  {
    name: '首页',
    icon: 'tabbar/tab_home.png',
    selectedIcon: 'tabbar/tab_home_active.png',
    path: '/home'
  }, {
    name: '收藏',
    icon: 'tabbar/tab_favor.png',
    selectedIcon: 'tabbar/tab_favor_active.png',
    path: '/favor'
  }, {
    name: '订单',
    icon: 'tabbar/tab_order.png',
    selectedIcon: 'tabbar/tab_order_active.png',
    path: '/order'
  }, {
    name: '消息',
    icon: 'tabbar/tab_message.png',
    selectedIcon: 'tabbar/tab_message.png',
    path: '/message'
  }
]


</script>
<style lang="less" scoped>
  .tab-bar {
    --van-tabbar-item-icon-size:50px !important;

    :deep(.van-tabbar-item__icon) {
      font-size: 50px;
    }
    img {
      height: 28px;
    }
  }
</style>
